<!DOCTYPE html>
<html lang="en">
<title>储值卡用户消费记录</title>
<#import "/layout/layout.html" as body/>
<@body.page>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 class="pull-left">用户消费记录</h5>
                </div>
                <div class="ibox-content">

                    <div class="table-responsive">
                        <ul class="nav navbar-nav status-nav" id="courseType">
                            <li <#if orderType = 1>class="active" </#if>  value="1"><a href="javascript:void(0);">团课</a></li>
                            <li <#if orderType = 2>class="active" </#if>  value="2"><a href="javascript:void(0);">私教</a></li>
                            <li <#if orderType = 3>class="active" </#if>  value="3"><a href="javascript:void(0);">训练营</a></li>
                            <li <#if orderType = 4>class="active" </#if>  value="4"><a href="javascript:void(0);">自助</a></li>
                            <li <#if orderType = 5>class="active" </#if>  value="5"><a href="javascript:void(0);">会员</a></li>
                        </ul>
                        <hr style="width: 100%">
                        <form class="form-inline" action="to_consume_list" role="form" id="form" method="post" accept-charset="UTF-8">
                            <div class="form-group">
                                <label for="storeName">订单ID：</label>
                                <input class="form-control" type="text" id="orderId" name="orderId" value="${orderId!''}"/>
                            </div>
                            <input type="hidden" id="orderType" name="orderType" value="${orderType!}">
                            <div class="form-group">
                                <label for="storeName0">消费时间：</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="createTime" name="createTime" value="${createTime!}">
                                </div>
                            </div>
                            <input type="hidden" id="pageNo" name="pageNo" value="${pageNo!}">
                            <input type="hidden" id="userId" name="userId" value="${userId!}">
                            <button type="submit" class="btn btn-outline btn-primary" style="margin-top: 5px">确认</button>
                        </form>
                        <hr style="width: 100%">
                        <table class="table table-hover table-center dataTables-example">
                            <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>消费内容</th>
                                <th>购买数量</th>
                                <th>消费金额</th>
                                <th>消费时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#if list??> 
                            	<#list list as list>
									<tr>
										<td>${list.orderInfo.id!}</td>
										<td>${list.servicePrice.serviceName!}</td>
										<td>${list.orderDetail.personCount!}</td>
										<td>${list.consumeAmt!}</td>
										<td>${list.createTime?datetime}</td>
									</tr>
								</#list> 
							</#if>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="ibox-footer overflow">
                    <h4 class="pull-left">
                        用户ID：<span>${userNo!}</span>
                        用户昵称：<span>${userName!}</span>
                        当前余额：<span>${userAccount!'0'}</span>
                        合计消费：<span>${accountConsum!'0'}</span>
                    </h4>
                    <div id="copot-page" class="pull-right"></div>
                </div>
                <#if type == '1'>
                	<div class="">
	                	<a href="${baseUrl}system/custom/to_custom_list"><button class="btn btn-outline btn-primary">返回列表页</button></a>
	                </div>
                </#if>
                 <#if type == '2'>
                	<div class="">
	                	<a href="${baseUrl}system/order/to_user_account"><button class="btn btn-outline btn-primary">返回列表页</button></a>
	                </div>
                </#if>
            </div>
        </div>
    </div>
</div>

<script src="${baseUrl}js/main.js"></script>
<script>
    $(document).ready(function () {
        $('.input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            //calendarWeeks: true,
            autoclose: true,
            format: 'yyyy-mm-dd',
        });
        //导出excel
        ExampleFile("用户excel");
        //分页
        new Page({
            parent: $("#copot-page"),
            nowPage: ${pageNo!},
            pageSize: 10,
            totalCount: ${pageCount!},
            setting: {
                defaultPage: 5,//默认显示可点击分页的个数
                firstPageText: "首页",
                prevPageText: "上一页",
                nextPageText: "下一页",
                lastPageText: "尾页"
            },
            callback: function (nowPage, totalPage) {
               $("#pageNo").val(nowPage);
               $("#form").submit();
            }
        });
        
        $("#courseType li").click(function(){
            id= $(this).val();
            $("#pageNo").val('');
            $("#orderType").val(id);
            $("#form").submit();
        });
        
        
        
    });
</script>
</@body.page>
</html>